<template>
	<div id="SutraArea">
		<x-header :left-options="{showBack: false}" title="一元专场" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="hd_bg" v-bind:style="{'background-image':'url(http://pm.haowenwan.com/public/static/images/icon_activated_bg.jpg)'}">
		</div>
		<div class="contentWrap">
			<div>
				<ul class="wrapper">
					<li v-for="item in killInfo" v-if="item.seckill_price == 1.00">
						<router-link :to="'/ZoneDetail/id/' + item.seckill_id">
							<img v-if="item.goods_thumb.indexOf('/uploads') == 0" :src="'/los/uploads/thumb/goods/' + item.goods_id + '_109X109.jpeg'" alt="" />
							<img v-else :src="item.goods_thumb" />
							<div class="desc">
								<p class="title">{{item.goods_name}}</p>
								<p class="price">限时活动专区</p>
								<p class="assess">当前价:<span>￥{{item.seckill_price}}</span><b>立即出价</b></p>
							</div>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
		<toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, Toast } from 'vux';
	import axios from 'axios';
	import $ from 'jquery'
	import wx from 'weixin-js-sdk';
	import BScroll from 'better-scroll';
	export default {
		data() {
			return {
				killInfo: [],
				flag: true,
				success: false,
				msg: '',
				shareUrl: ''
			}
		},
		components: {
			XHeader,
			Toast,
			BScroll,
		},
		activated() {
			this.getSecKillInfo();
			this.getWXShare();
		},
		methods: {
			getSecKillInfo: function() {
				let more = true;
				let page = 1;
				let _this = this;
				this.$http({
					method: 'GET',
					url: '/los/api/seckill/goods_list.json',
					data: ''
				}).then((result) => {
					this.killInfo = result.data.list.data.reverse();
					console.log(this.killInfo);
					this.cur_time = result.data.cur_time;
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/seckill/goods_list?page=' + page).then(function(result) {
								$.each(result.data.list.data, function(index, val) {
									_this.killInfo.push(val);
								});
								more = true;
								if(result.data.list.data == '') {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},
			//微信分享
			getWXShare: function() {
				let _this = this;
				let urls = window.location.href;
				var ua = navigator.userAgent.toLowerCase();
				if(/iphone|ipad|ipod/.test(ua)) {
					if(urls.indexOf("?") != -1) {
						this.shareUrl = window.location.href;
					} else {
						this.shareUrl = 'http://pm.haowenwan.com/dist/#/'
					}
				} else if(/android/.test(ua)) {
					this.shareUrl = urls;
				}
				var params = {
					url: this.shareUrl,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							debug: result.data.debug,
							appId: result.data.appId,
							timestamp: result.data.timestamp,
							nonceStr: result.data.nonceStr,
							signature: result.data.signature,
							jsApiList: result.data.jsApiList,
						});
						wx.ready(function() {
							wx.onMenuShareAppMessage({
								title: '庆祝建党97周年，红色珍藏专场拍卖等你来', // 分享标题
								desc: '珍藏红色经典，庆祝建党97周年，欢迎参与红色专题竞拍~', // 分享描述
								link: urls, //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'http://pm.haowenwan.com/public/static/images/icon_red_bg.png', // 分享图标
								type: 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function(res) {
									_this.shareCallback('ShareAppMessage', urls)
								},
								cancel: function(err) {
									// 用户取消分享后执行的回调函数
								}
							});
							//分享朋友圈
							wx.onMenuShareTimeline({
								title: '庆祝建党97周年，红色珍藏专场拍卖等你来' + '\n' + '珍藏红色经典，庆祝建党97周年，欢迎参与红色专题竞拍~', // 分享标题
								link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: 'http://pm.haowenwan.com/public/static/images/icon_red_bg.png', // 分享图标
								success: function() {
									_this.shareCallback('ShareTimeline', urls)
									// 用户点击了分享后执行的回调函数
								},
							});
							wx.error(function(res) {});
						})
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},

			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.no-data {
		width: 5.86666rem;
		margin: 0 auto;
	}
	
	.no-data img {
		width: 100%;
	}
	
	.wrapper {
		height: 650px;
		overflow: hidden;
	}
	
	.hd_bg {
		width: 100%;
		height: 5.33rem;
		background-size: 100% 100%;
	}
	
	.hd_bg img {
		width: 100%;
		height: 100%;
	}
	
	.contentWrap {
		background: #d3f4fd;
		padding: 0.26rem;
	}
	
	.contentWrap ul {
		width: 100%;
		height: 100%;
	}
	
	.contentWrap ul li {
		width: 100%;
		overflow: hidden;
		position: relative;
		border-radius: 0.1rem;
		height: 3.33rem;
		margin-bottom: 0.26rem;
	}
	
	.contentWrap ul li img {
		float: left;
		width: 3.33rem;
		height: 3.33rem;
		border-bottom-left-radius: 0.1rem;
		border-top-left-radius: 0.1rem;
	}
	
	.contentWrap ul li .desc {
		float: right;
		width: 64.86%;
		height: 3.33rem;
		overflow: hidden;
		background: #fff;
		border-bottom-right-radius: 0.1rem;
		border-top-right-radius: 0.1rem;
		padding: 0.37rem 0.26rem 0.37rem 0.48rem;
	}
	
	.contentWrap ul li .desc .title {
		font-size: 0.4rem;
		height: 0.6rem;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.contentWrap ul li .desc .price {
		color: #aaa;
		font-size: 0.34rem;
	}
	
	.contentWrap ul li .desc .assess {
		float: left;
		margin-top: 0.93rem;
		font-size: 0.34rem;
		color: #aaa;
		overflow: hidden;
		position: relative;
		line-height: 0.6rem;
		width: 100%;
	}
	
	.contentWrap ul li .desc .assess span {
		font-size: 0.42rem;
		color: #da4240;
	}
	
	.contentWrap ul li .desc .assess b {
		font-weight: normal;
		font-size: 0.34rem;
		right: 0;
		position: absolute;
		background: #a30000;
		width: 1.6rem;
		height: 0.61rem;
		line-height: 0.61rem;
		border-radius: 0.05rem;
		color: #fff;
		display: inline-block;
		text-align: center;
	}
</style>